<template>
  <div class="doctor-fenye">
    <el-pagination
      background
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInlinedata.pageNum"
      :page-sizes="[6, 12, 20, 30]"
      :page-size="formInlinedata.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  // props:["formInline"],\
  props: {
    formInline: {
      type: Object,
      default: {
        pageNum: 1,
        pageSize: 6,
      },
      required: true,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      formInlinedata: this.formInline,
    };
  },
  methods: {
    handleSizeChange(size) {
      this.formInlinedata.pageSize = size;
      this.formInlinedata.pageNum = 1;
      this.$emit("formInlineChange", this.formInlinedata);
    },
    handleCurrentChange(num) {
      this.formInlinedata.pageNum = num;
      this.$emit("formInlineChange", this.formInlinedata);
    },
  },
};
</script>

<style lang="scss" scoped>
.doctor-fenye {
  width: 100%;
  margin-top: 20px;
  .el-pagination::v-deep {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .el-pagination__sizes {
      .el-select.el-select--mini {
        .el-input__inner {
          height: 23px;
          line-height: 24px;
        }
      }
    }
  }
}
</style>